<script setup>
import { ref, onMounted, nextTick, onUnmounted, onDeactivated, onActivated } from 'vue'
import { teamPerformance } from '@/api/jdb'
import useUserStore from '@/stores/modules/user'
import { useRoute, useRouter } from 'vue-router'
import TeamDataList                   from '@/views/Team/components/TeamDataList.vue'
import {closeToast, showLoadingToast} from 'vant';

const userStore = useUserStore()
const router = useRouter()
const route = useRoute()

const showPicker = ref(false)
const columns = [
  { text: '今天', value: 0 },
  { text: '昨天', value: 1 },
  { text: '上月', value: 2 },
  { text: '当月', value: 3 },
  { text: '全部', value: 4 },
]
const pickerValue = ref([0])
const fieldValue = ref('今天')

const coachList = ref([])
const schoolList = ref([])
const studentList = ref([])
const type = ref(0)
const roleType = ref(0)

const initDataList = () => {
  const toast = showLoadingToast({
    message: '正在加载 ...',
    forbidClick: true,
    duration: 0
  })
  teamPerformance({
    type: pickerValue.value[0]
  }).then(response => {
    closeToast()
    coachList.value = response.data.coach
    schoolList.value = response.data.school
    studentList.value = response.data.student
  })
}

const onConfirm = ({ selectedValues, selectedOptions }) => {
  showPicker.value = false
  pickerValue.value = selectedValues
  fieldValue.value = selectedOptions[0].text
  initDataList()
}

const activeName = ref('0')

const changeRoleType = (type) => {
  roleType.value = type
}

const initRoleType = () => {
  if (userStore.grade === 1) {
    roleType.value = 0
    activeName.value = '0'
  } else if (userStore.grade === 2) {
    roleType.value = 1
    activeName.value = '1'
  } else {
    roleType.value = 2
    activeName.value = '2'
  }
}
const onClickLeft = () => {
  router.back()
}

initDataList()
initRoleType()
</script>

<template>
  <van-nav-bar title="我的团队" left-arrow fixed placeholder @click-left="onClickLeft"/>
  <van-field
      v-model="fieldValue"
      is-link
      readonly
      @click="showPicker = true"
      input-align="center"
  />
  <van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
    <van-picker
        :model-value="pickerValue"
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
    />
  </van-popup>

  <van-tabs v-model:active="activeName" v-if="userStore.grade === 1">
    <van-tab title="驾校" name="0" @click="changeRoleType(0)">
      <TeamDataList :type="0" :data-list="schoolList" />
    </van-tab>
    <van-tab title="教练" name="1" @click="changeRoleType(1)">
      <TeamDataList :type="1" :data-list="coachList" />
    </van-tab>
    <van-tab title="学员" name="2" @click="changeRoleType(2)">
      <TeamDataList :type="2" :data-list="studentList" />
    </van-tab>
  </van-tabs>

  <van-tabs v-model:active="activeName" v-if="userStore.grade === 2">
    <van-tab title="教练" name="1" @click="changeRoleType(1)">
      <TeamDataList :type="1" :data-list="coachList" />
    </van-tab>
    <van-tab title="学员" name="2" @click="changeRoleType(2)">
      <TeamDataList :type="2" :data-list="studentList" />
    </van-tab>
  </van-tabs>

  <van-tabs v-model:active="activeName" v-if="userStore.grade === 3">
    <van-tab title="学员" name="2" @click="changeRoleType(2)">
      <TeamDataList :type="2" :data-list="studentList" />
    </van-tab>
  </van-tabs>
</template>

<style scoped>

</style>
